<template>
    <a-control-group>
        <a-input-check-box-single
            :color="color"
            :size="size"
            :sharp="sharp"
            :disabled="disabled || getDisabledFunc(a)"
            :plain="plain"
            v-for="a in items"
            :key="getTextFunc(a)"
            @click="toggleItem(a)"
            :value="isItemSelected(a)"
        >
            <template v-slot:append>
                {{ getTextFunc(a) }}
            </template>
        </a-input-check-box-single>
    </a-control-group>
</template>

<script>
import AControlGroup from './AControlGroup.vue'
import AInputCheckBoxSingle from './AInputCheckBoxSingle.vue'
import inputMixin from "../common/inputMixin"

export default {
    components: { AControlGroup, AInputCheckBoxSingle },
    mixins: [inputMixin],
    props: {
        plain: {
            type: Boolean,
            default: false,
        },
        value: {
            type: Array,
            default: [],
        },
        items: {
            type: Array,
            default: [],
        },
        getTextFunc: {
            type: Function,
            default: a => a.text,
        },
        getValueFunc: {
            type: Function,
            default: a => a.value,
        },
        getDisabledFunc: {
            type: Function,
            default: a => a.disabled,
        },
    },
    methods: {
        input(val) {
            this.$emit('update:value', val)
        },
        toggleItem(item) {
            let itemValue = this.getValueFunc(item)
            if (this.isItemSelected(item)) {
                this.input(this.value.filter(a => a != itemValue))
            } else {
                this.input([...this.value, itemValue])
            }
        },
        isItemSelected(item) {
            let itemValue = this.getValueFunc(item)
            return this.value.some(a => a == itemValue)
        },
    },
}
</script>